<template>
  <view>
    <view class="cart-container" v-if="cart.length !== 0">
      <!-- 收获地址组件 -->
      <my-address></my-address>
      <view class="cart-title">
        <!-- 左侧的图标 -->
        <uni-icons type="shop" size="18"></uni-icons>
        <!-- 右侧的文本 -->
        <text class="cart-title-text">购物车</text>
      </view>

      <uni-swipe-action>
        <!-- 循环渲染购物车中的商品信息 -->
        <block v-for="(item, index) in cart" :key="index">
          <uni-swipe-action-item
            :right-options="options"
            @click="swipeItemClickHandler(item)"
          >
            <!-- @num-change="numberChangeHandler" -->
            <my-goods
              :goods="item"
              :show-num="true"
              @num-change="numberChangeHandler"
            >
              <radio
                :checked="item.goods_state"
                color="#C00000"
                slot="radio"
                @click.native="radioClickHandler(item)"
              />
            </my-goods>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>

      <!-- 使用自定义的结算组件 -->
      <my-settle></my-settle>
    </view>
    <!-- 空白购物车的区域 -->
    <view v-else class="empty-cart">
      <image src="/static/cart_empty@2x.png" class="empty-img"></image>
      <text class="tip-text">你的购物车里毛都没有哦~</text>
    </view>
  </view>
</template>

<script>
import badgeNux from '@/mixins/tabbar-badge.js';
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  mixins: [badgeNux],
  computed: {
    ...mapState({
      cart: state => state.moduleCart.cart
    })
  },
  methods: {
    radioClickHandler(item) {
      item.goods_state = !item.goods_state;
      // 日 点击之后调用仓库的这个方法，持久化保存商品的勾选状态
      this.updateGoodsState(item.goods_id);
    },
    ...mapMutations('moduleCart', [
      'updateGoodsState',
      'updateGoodsCount',
      'removeGoodsById'
    ]),
    // 监听到了  NumberBox组件数量变化的事件
    numberChangeHandler(e) {
      // const num = {
      //   // 商品的 Id
      //   goods_id: item.goods_id
      //   // goods_count: +value
      // };
      this.updateGoodsCount(e);
    },
    // 点击滑动删除某一样商品
    swipeItemClickHandler(item) {
      this.removeGoodsById(item.goods_id);
    }
  }
};
</script>
<!-- 商品列表的标题区域 -->
<style lang="scss">
.cart-container {
  padding-bottom: 50px;
}
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    font-size: 14px;
    margin-left: 10px;
  }
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  .empty-img {
    width: 90px;
    height: 90px;
  }
  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>
